<template>
  <div class="sendMsg">
    <!--  导航开始 -->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
    <!--    内容-->
    <div class="content">
      <div class="msgItems borderBottom flex-space-between">
        <div>收件人</div>
        <input v-model="name" type="text" placeholder="请输入收件人姓名">
      </div>
      <div class="msgItems borderBottom flex-space-between">
        <div>联系电话</div>
        <input v-model="tel" type="number" placeholder="请输入联系电话">
      </div>
      <div class="msgItems address borderBottom">
        <div>邮寄地址</div>
        <textarea v-model="address" placeholder="请输入邮寄地址"></textarea>
      </div>
    </div>
<!--    确认按钮-->
    <button @click="sendCert">确认</button>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import {SENDCERT} from "../../apis/oldUniversity";
  export default {
    name:"sendMsg",
    components:{
      commonHeader,
    },
    data() {
      return {
        title:"寄送信息",
        name:'',//姓名
        tel:'',//手机号
        address:'',//地址
      }
    },
    mounted() {

    },
    methods:{
      // 返回
      goBack(){
        this.$router.push({
          name:'home',
          query:{
            tabIndex:3
          }
        })
      },
      // ----------------接口开始------------
      //
      // 寄送证书
      sendCert(){
        let sendCert = SENDCERT
        let params = {
          cert_id:1,//证书ID
          name:this.name,//收货人姓名
          tel:this.tel,//手机号
          address:this.address,//地址
        }
        sendCert(params).then( res => {
          if(res.data.code*1===200){
            // 回到首页
            this.$router.push({
              name:'home',
              query:{
                tabIndex:3
              }
            })
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .sendMsg{
    width:100%;
    padding:1.38rem 0.3rem;
    box-sizing: border-box;
    .content{
      .msgItems{
        padding:0.3rem 0;
        box-sizing: border-box;
        font-size: @fontSize34;
        font-family: @fontFamily500;
        font-weight: @fontWeight400;
        color: @whiteColor;
        input{
          flex:1;
          margin-left:0.2rem;
          text-align: right;
          background:none;
          font-size: @fontSize34;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color: @whiteColor;
        }
      }
      .address{
        textarea{
          width:100%;
          height:1.42rem;
          background: #232323;
          margin-top: 0.22rem;
          padding:0.22rem;
          box-sizing: border-box;
        }
      }
      input::-webkit-input-placeholder textarea::-webkit-input-placeholder { /* WebKit browsers */
        color:rgba(255,255,255,0.5);
      }

      input::-moz-placeholder textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:rgba(255,255,255,0.3);
      }

      input:-ms-input-placeholder textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
        color:rgba(255,255,255,0.3);
      }
      .borderBottom{
        border-bottom: 0.02rem solid rgba(255,255,255,0.4);
      }
    }
    button{
      width:100%;
      height:0.86rem;
      background:#FD0000;
      border-radius:0.1rem;
      font-size: @fontSize36;
      font-weight: @fontWeight400;
      font-family: @fontFamily500;
      color:@whiteColor;
      margin-top:1.24rem;
    }
  }
</style>
